<template>
	<view class="page-container">
		<image src="/static/image/my-003.png" mode="widthFix" class="bg"></image>
		<view class="header">
			<view class="user">
				<image :src="userInfo.head_image" class="header-image" mode="aspectFill" v-if="userInfo.head_image">
				</image>
				<image v-else src="/static/image/head.png" mode="" class="header-image"></image>
				<view class="user-info">
					<view class="user-name">
						<text @tap="onEdit">{{ userInfo.nick_name }}</text>
					</view>
					<view class="user-id">
						<text>UID：{{ userInfo.uuid }}</text>
						<image src="/static/image/my-012.png" mode="" @click.stop="copy(userInfo.uuid)"></image>
					</view>
					<view class="link-address">
						<image src="/static/image/my-002.png" class="link-address-bg"></image>
						<text>区块链地址：{{ (userInfo.wallet_address || '').substring(0, 10) }}...</text>
						<!-- <image src="/static/image/my-013.png" class="copy-icon"
							@click.stop="copy(userInfo.wallet_address)"></image> -->
					</view>
				</view>
			</view>
		</view>
		<view class="list">
			<view class="list-item" @click="toEditPayPassword">
				<view class="list-item-left">
					<image src="/static/image/my-001.png" mode=""></image>
					<text>交易密码</text>
				</view>
			</view>
			<view class="list-item" @click="toAuth">
				<view class="list-item-left">
					<image src="/static/image/my-006.png" mode=""></image>
					<text>实名认证</text>
				</view>
			</view>
			<view class="list-item" @click="toWallet">
				<view class="list-item-left">
					<image src="/static/image/my-008.png" mode=""></image>
					<text>我的钱包</text>
				</view>
			</view>
			<view class="list-item" @click="toEdit">
				<view class="list-item-left">
					<image src="/static/image/my-edit.png" mode=""></image>
					<text>编辑个人资料</text>
				</view>
			</view>
			<view class="list-item" @click="toDeving('我的积分')">
				<view class="list-item-left">
					<image src="/static/image/my-007.png" mode=""></image>
					<text>我的积分</text>
				</view>
			</view>
			<view class="list-item" @click="toOrder">
				<view class="list-item-left">
					<image src="/static/image/my-010.png" mode=""></image>
					<text>订单记录</text>
				</view>
			</view>
			<view class="list-item" @click="toInvite">
				<view class="list-item-left">
					<image src="/static/image/my-005.png" mode=""></image>
					<text>我的邀请</text>
				</view>
			</view>
			<view class="list-item" @click="toContact()">
				<view class="list-item-left">
					<image src="/static/image/my-009.png" mode=""></image>
					<text>客服中心</text>
				</view>
			</view>
			<view class="list-item" @click="toAbout">
				<view class="list-item-left">
					<image src="/static/image/my-011.png" mode=""></image>
					<text>关于我们</text>
				</view>
			</view>
			<view class="list-item" @click="toAddress">
				<view class="list-item-left">
					<image src="/static/image/my-011.png" mode=""></image>
					<text>收货地址</text>
				</view>
			</view>

			<view class="list-item" @click="toProvacy">
				<view class="list-item-left">
					<image src="/static/image/my-011.png" mode=""></image>
					<text>隐私协议</text>
				</view>
			</view>
			<view class="list-item" @click="quitLogin()">
				<view class="list-item-left">
					<image src="/static/image//my-004.png" mode=""></image>
					<text>退出登录</text>
				</view>
			</view>
		</view>
		<tabbar ref="tabbar"></tabbar>
	</view>
</template>

<script>
	import tabbar from "@/components/tabbar.vue";
	export default {
		components: {
			tabbar,
		},
		data() {
			return {
				userInfo: {},
			};
		},
		onShow() {
			this.getUserInfo();
		},
		methods: {
			onEdit(){
				uni.navigateTo({
					url: "/pages/my/editName",
				});
			},
		
			toProvacy() {
				uni.navigateTo({
					url: "/pages/login/privacy",
				});
			},
			getUserInfo() {
				this.$http("api/user/userInfo")
					.then((res) => {
						this.userInfo = res;
					})
					.catch((err) => {
						console.log(err);
					});
			},
			quit() {
				uni.removeStorageSync("token");
				uni.navigateTo({
					url: "../login/index",
				});
			},
			toEdit(){
				uni.navigateTo({
					url:"/pages/my/editUser"
				})
			},
			toDeving(title = '') {
				uni.navigateTo({
					url: '/pages/deving?title=' + title,
				});
			},
			toEditPayPassword() {
				uni.navigateTo({
					url: "./editPayPassword",
				});
			},
			goUser() {
				uni.navigateTo({
					url: "./editUser",
				});
			},
			toSet() {
				uni.navigateTo({
					url: "./setting",
				});
			},
			toOrder() {
				uni.navigateTo({
					url: "./myOrder",
				});
			},
			toCollet() {
				uni.navigateTo({
					url: "./myCollect",
				});
			},
			toBox() {
				uni.navigateTo({
					url: "./myBox",
				});
			},
			toTeam() {
				uni.navigateTo({
					url: "./myTeam",
				});
			},
			toInvite() {
				uni.navigateTo({
					url: "./invite?uuid=" + this.userInfo.uuid,
				});
			},
			toinvites() {
				uni.navigateTo({
					url: "/pages/my/invite",
				});
			},
			toAddress() {
				uni.navigateTo({
					url: "/pages/my/address",
				});
			},
			toUserGoodRewardList() {
				uni.navigateTo({
					url: "/pages/my/userGoodRewardList",
				});
			},
			toContact() {
				uni.navigateTo({
					url: "./contact",
				});
			},
			toWallet() {
				uni.navigateTo({
					url: "./wallet",
				});
			},
			// 合成藏品
			toCompound() {
				uni.navigateTo({
					url: "/pages/chip/index",
				});
			},
			toStuff() {
				uni.navigateTo({
					url: "../chip/stuff",
				});
			},
			// 实名认证
			toAuth() {
				this.$http("api/user/userInfo")
					.then((res) => {
						if (res.is_auth == 1) {
							uni.navigateTo({
								url: "./joinde",
							});
						} else {
							uni.navigateTo({
								url: "./realAuth",
							});
						}
					})

			},
			toAbout() {
				uni.navigateTo({
					url: "./about",
				});
			},
			toMyNFT(num) {
				let sign = num || 0;
				uni.navigateTo({
					url: `./myNFT?id=${sign}`,

				});
			},
			//退出登录
			quitLogin() {
				uni.showModal({
					confirmColor: '#DE2D32',
					content: '是否退出登录',
					success: (res) => {
						if (res.confirm) {
							uni.switchTab({
								url: '/pages/home/index'
							})
							uni.clearStorageSync()
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});
			},
			copy(val) {
				// #ifdef APP-PLUS
				uni.setClipboardData({
					data: val,
					success: function() {
						uni.hideToast();
						uni.getClipboardData({
							success: function(res) {
								uni.showToast({
									title: "复制成功",
									icon: "none",
								});
							},
						});
					},
				});
				// #endif
				// #ifdef H5
				this.$copyText(val).then(
					function(e) {
						uni.showToast({
							title: "复制成功!",
							icon: "none",
						});
					},
					function(e) {
						uni.showToast({
							title: "复制失败!",
							icon: "none",
						});
					}
				);
				// #endif
			},
		},
	};
</script>
<style>
	page {
		background: #f5f5f5;
	}
</style>
<style lang="scss" scoped>
	.page-container {
		width: 100%;
		min-height: 100vh;
		background: #110D18;
	}

	.bg {
		width: 100%;
		position: absolute;
		top: -140rpx;
	}

	.header {
		padding: 60rpx 33rpx 0;
		position: relative;

		.header-bg {
			position: absolute;
			left: 0;
			top: 0;
			z-index: 0;
			width: 100%;
			height: 100%;
		}

		.user {
			display: flex;
			align-items: center;
			position: relative;
			z-index: 1;

			.header-image {
				width: 140rpx;
				height: 140rpx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 10px;
				background: #B4B4B4;
			}

			.user-info {
				flex: 1;
				display: flex;
				flex-direction: column;
				justify-content: space-between;

				.user-name {
					flex: 1;
					display: flex;
					justify-content: space-between;
					align-items: center;

					text {
						font-size: 30rpx;
						color: #E2E2E2;
					}
				}

				.user-id {
					font-size: 26rpx;
					color: #C3C3C3;
					display: flex;
					align-items: center;

					image {
						width: 24rpx;
						height: 24rpx;
						margin-left: 23rpx;
					}
				}

				.link-address {
					width: 100%;
					height: 54.8rpx;
					position: relative;
					display: flex;
					align-items: center;
					padding-left: 20rpx;

					text {
						font-size: 24rpx;
						color: #B3A1E6;
						position: relative;
						z-index: 1;
					}

					.link-address-bg {
						position: absolute;
						top: 0;
						left: 0;
						z-index: 0;
						width: 100%;
						height: 54.8rpx;
					}

					.copy-icon {
						width: 24rpx;
						height: 24rpx;
						margin-left: 23rpx;
						position: relative;
						z-index: 1;
					}
				}
			}
		}

		.line {
			width: 100%;
			height: 1px;
			background: #FFFFFF;
			margin-top: 19px;
			position: relative;
			z-index: 1;
		}

		.header-btn {
			width: 100%;
			overflow: hidden;
			margin-top: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;

			button {
				flex: 1;
				height: 40px;
				background: #FFFFFF;
				border-radius: 9px;
				margin-right: 15px;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 14px;
				color: #2F2F2F;
				line-height: 20px;

				&:last-child {
					margin: 0;
				}

				image {
					width: 18px;
					height: 18px;
					margin-right: 5px;
				}
			}
		}
	}

	.list {
		padding: 0 56rpx;
		margin-top: 35px;
		overflow: hidden;
		position: relative;
		z-index: 1;

		.list-item {
			height: 88rpx;
			border-bottom: 1px solid rgba(98, 96, 106, .3);
			display: flex;
			justify-content: space-between;
			align-items: center;

			&:last-child {
				border-bottom: none;
			}

			.list-item-left {
				display: flex;
				align-items: center;

				text {
					font-size: 26rpx;
					color: #A1A4B7;
				}

				image {
					width: 28rpx;
					height: 28rpx;
					margin-right: 30rpx;
				}
			}

			.list-item-right {
				display: flex;
				justify-content: flex-end;
				align-items: center;

				text {
					font-size: 14px;
					color: #B4B4B4;
				}

				image {
					width: 15px;
					height: 15px;
					margin-left: 10px;
				}
			}
		}
	}
</style>
